Srallax.js একটি জনপ্রিয় প্যারালাক্স স্ক্রলিং প্লাগইন যা সহজভাবে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে ব্যবহৃত হয়। এর মাধ্যমে, আপনি সহজে ওয়েবসাইটে প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে পারবেন। এখানে, আমরা দেখব কিভাবে Srallax.js প্লাগইন ইনস্টল এবং ব্যবহার করতে হয়, এবং এটি ব্যবহার করে কাস্টম প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করা যায়।
১. Srallax.js Plugin ইন্সটল করা
Srallax.js প্লাগইন ইন্সটল করতে নিচের ধাপগুলো অনুসরণ করুন:
১.১. CDN থেকে ইনক্লুড করা
প্রথমে, Srallax.js লাইব্রেরি আপনার HTML পেজে সঠিকভাবে ইনক্লুড করুন। আপনি CDN ব্যবহার করে খুব সহজেই এই লাইব্রেরিটি ইনক্লুড করতে পারেন।
<!-- Include Srallax.js from CDN -->
<script src="https://cdn.jsdelivr.net/npm/srallax@1.0.0/dist/srallax.min.js"></script>
এটি আপনার HTML ফাইলের <head> সেকশনে অথবা <body> সেকশনের শেষে যুক্ত করতে পারেন।
১.২. Download এবং Locally Include করা
আপনি চাইলে Srallax.js ডাউনলোড করে আপনার লোকাল সিস্টেমে সেটিও ব্যবহার করতে পারেন। এটি ডাউনলোড করতে Srallax.js GitHub Repository থেকে ফাইলটি ডাউনলোড করুন এবং আপনার প্রোজেক্ট ফোল্ডারে srallax.min.js ফাইলটি রাখুন।
<!-- Include Srallax.js from local file -->
<script src="path/to/srallax.min.js"></script>
২. Srallax.js ব্যবহার করা
Srallax.js প্লাগইনটি ব্যবহার করার জন্য কিছু সোজা ধাপ অনুসরণ করতে হবে। এটি খুবই সহজ এবং দ্রুত প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে সহায়তা করে।
২.১. HTML Structure তৈরি করা
প্রথমে, HTML ফাইলে এমন একটি স্ট্রাকচার তৈরি করুন যেখানে প্যারালাক্স স্ক্রলিং ইফেক্ট প্রযোজ্য হবে। এখানে একটি উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax with Srallax.js</title>
<script src="https://cdn.jsdelivr.net/npm/srallax@1.0.0/dist/srallax.min.js"></script>
<style>
.parallax {
height: 100vh;
background-size: cover;
background-position: center;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<!-- Parallax Section 1 -->
<div class="parallax" style="background-image: url('https://via.placeholder.com/1920x1080');" data-srallax="true">
<h1>Welcome to Our Website</h1>
</div>
<!-- Content Section -->
<div style="height: 100vh; background: #fff; color: #333; display: flex; justify-content: center; align-items: center;">
<p>Scroll down to see the parallax effect!</p>
</div>
<!-- Parallax Section 2 -->
<div class="parallax" style="background-image: url('https://via.placeholder.com/1920x1080/ff7f7f');" data-srallax="true">
<h1>Our Amazing Services</h1>
</div>
<script>
// Initialize Srallax.js
new Srallax();
</script>
</body>
</html>
ব্যাখ্যা:
- HTML Structure:
- প্রথমে দুটি parallax ক্লাসের সাথে সেকশন তৈরি করা হয়েছে, প্রতিটি সেকশনে ব্যাকগ্রাউন্ড ইমেজ যোগ করা হয়েছে।
data-srallax="true"এট্রিবিউট প্যারালাক্স স্ক্রলিংয়ের জন্য ব্যবহার করা হয়েছে, যা Srallax.js কে এই সেকশনটি স্ক্রলিংয়ের সময় ইফেক্ট প্রয়োগ করতে নির্দেশ দেয়।
- JavaScript Initialization:
new Srallax();স্ক্রিপ্টের মাধ্যমে Srallax.js প্লাগইনটি ইনিশিয়ালাইজ করা হয়েছে।
২.২. Parallax Speed Control
Srallax.js প্লাগইনে আপনি speed কন্ট্রোল করতে পারেন, যাতে ব্যাকগ্রাউন্ড এবং কন্টেন্ট আলাদা গতিতে স্ক্রল হয়।
<div class="parallax" style="background-image: url('image.jpg');" data-srallax="true" data-speed="0.5">
<h1>Custom Speed Parallax</h1>
</div>
এখানে data-speed="0.5" এর মাধ্যমে প্যারালাক্স স্ক্রলিংয়ের গতির পার্থক্য নিয়ন্ত্রণ করা হয়েছে। আপনি 0.1 থেকে 1 পর্যন্ত স্পিড সেট করতে পারেন।
৩. Additional Features
৩.১. Parallax on Scroll and Hover
Srallax.js দিয়ে আপনি স্ক্রলিং এবং হোভার উভয় ক্ষেত্রেই প্যারালাক্স ইফেক্ট প্রয়োগ করতে পারেন।
<div class="parallax" style="background-image: url('image.jpg');" data-srallax="true" data-hover="true">
<h1>Hover to See Parallax Effect</h1>
</div>
এখানে data-hover="true" দিয়ে আপনি হোভার করার সময় প্যারালাক্স স্ক্রলিং ইফেক্ট প্রয়োগ করতে পারবেন।
৩.২. Multiple Layers
একাধিক লেয়ার ব্যবহার করতে, আপনি আলাদা আলাদা parallax ক্লাস দিয়ে লেয়ার তৈরি করতে পারেন। এটি আপনার ওয়েবপেজকে আরও ডাইনামিক এবং গভীরতা সম্পন্ন করে।
<div class="parallax" style="background-image: url('layer1.jpg');" data-srallax="true" data-speed="0.2"></div>
<div class="parallax" style="background-image: url('layer2.jpg');" data-srallax="true" data-speed="0.4"></div>
<div class="parallax" style="background-image: url('layer3.jpg');" data-srallax="true" data-speed="0.6"></div>
এখানে, data-speed এর মাধ্যমে প্রতিটি লেয়ারের গতির পার্থক্য তৈরি করা হয়েছে।
৪. Customizing Parallax with CSS
প্যারালাক্স স্ক্রলিংয়ের স্টাইল কাস্টমাইজ করার জন্য CSS ব্যবহার করুন। এটি আপনার পেজের লেআউট এবং ইফেক্টের সাথে মেলে এমন ডিজাইন তৈরি করবে।
.parallax {
position: relative;
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
color: white;
height: 100vh;
text-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.parallax h1 {
font-size: 3rem;
font-weight: bold;
}
এখানে, আপনি text-shadow, font-size, এবং height কাস্টমাইজ করে প্যারালাক্স স্ক্রলিংয়ের লেআউট ও ভিজ্যুয়াল ইফেক্টের সাথে মানানসই ডিজাইন তৈরি করতে পারেন।
সারাংশ
Srallax.js একটি সহজ এবং শক্তিশালী প্যারালাক্স স্ক্রলিং প্লাগইন যা ওয়েবসাইটের ব্যাকগ্রাউন্ড এবং কন্টেন্টের গতির মধ্যে পার্থক্য তৈরি করে একটি ডাইনামিক স্ক্রলিং অভিজ্ঞতা প্রদান করে। এটি CDN অথবা local download মাধ্যমে ইনস্টল এবং ব্যবহার করা যেতে পারে। এর মাধ্যমে আপনি parallax speed control, multiple layers, এবং hover effects সহ কাস্টম প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে পারবেন।
এছাড়া, CSS দিয়ে স্টাইলিং এবং JavaScript দিয়ে কাস্টম প্যারালাক্স ইফেক্ট প্রয়োগ করার মাধ্যমে আপনি আপনার ওয়েবসাইটকে আরও ইন্টারঅ্যাকটিভ এবং আকর্ষণীয় করতে পারেন।
Read more
